<div class="demo-ripple">
  <section>
    <md-checkbox [(ngModel)]="disableButtonRipples">Disable button ripples</md-checkbox>
    <button md-button [disableRipple]="disableButtonRipples">flat</button>
    <button md-raised-button [disableRipple]="disableButtonRipples">flat</button>
    <button md-fab [disableRipple]="disableButtonRipples">
      <md-icon>check</md-icon>
    </button>
    <button md-mini-fab [disableRipple]="disableButtonRipples">
      <md-icon>check</md-icon>
    </button>
  </section>

  <section>
    <div class="demo-ripple-checkbox-option"><md-checkbox [(ngModel)]="centered">Centered</md-checkbox></div>
    <div class="demo-ripple-checkbox-option"><md-checkbox [(ngModel)]="unbounded">Unbounded</md-checkbox></div>
    <div class="demo-ripple-checkbox-option"><md-checkbox [(ngModel)]="disabled">Disabled</md-checkbox></div>
    <div class="demo-ripple-checkbox-option"><md-checkbox [(ngModel)]="rounded">Rounded container (flaky in Firefox)</md-checkbox></div>
  </section>

  <section>
    Speed
    <md-radio-group [(ngModel)]="rippleSpeed">
      <md-radio-button name="demo-ripple-options" value="0.4">Slow</md-radio-button>
      <md-radio-button name="demo-ripple-options" value="1">Normal</md-radio-button>
      <md-radio-button name="demo-ripple-options" value="2">Fast</md-radio-button>
    </md-radio-group>
  </section>

  <section>
    <md-form-field>
      <input mdInput placeholder="Ripple radius" aria-label="radius" [(ngModel)]="radius">
    </md-form-field>
    <md-form-field>
      <input mdInput placeholder="Ripple color" aria-label="color" [(ngModel)]="rippleColor">
    </md-form-field>
  </section>

  <section>
    <button md-raised-button (click)="launchRipple()">Launch Ripple</button>
    <button md-raised-button (click)="launchRipple(true)">Launch Ripple (persistent)</button>
    <button md-raised-button (click)="fadeOutAll()">Fade Out All</button>
  </section>

  <section>
    <div class="demo-ripple-container"
         md-ripple
         [class.demo-ripple-disabled]="disabled"
         [mdRippleCentered]="centered"
         [mdRippleDisabled]="disabled"
         [mdRippleRadius]="radius"
         [mdRippleColor]="rippleColor"
         [mdRippleUnbounded]="unbounded"
         [mdRippleSpeedFactor]="rippleSpeed"
    >

    </div>
  </section>
</div>
